{% extends 'baseAdmin.html' %}

{% load static %}

{% block ptitle %}新建相册{% endblock %}

{% block javascript %}
    {# JQUERY FILE UPLOAD SCRIPTS #}
    <script src="{% static 'travellog/js/jquery.ui.widget.js' %}"></script>
    <script src="{% static 'travellog/js/jquery.iframe-transport.js' %}"></script>
    <script src="{% static 'travellog/js/jquery.fileupload.js' %}"></script>

    {# PHOTOS PAGE SCRIPTS #}
    <script src="{% static 'travellog/js/progress-bar-upload.js' %}"></script>
{% endblock %}

{% block photos_content %}
<div style="margin-bottom: 20px;">

    <form class="form-horizontal">
        <div class="container">
          <div class="col-md-10 column" style="margin-bottom: 30px;">
        			<div class="page-header">
        				<h1>新建相册<small>Subtext for header</small> </h1>
        			</div>
      		</div>

          <div class="row clearfix">
            <div class="col-md-8 column">
                <div class="row form-group">
                    <label class="control-label col-lg-2" for="name">名称</label>
                    <div class="col-lg-8 col-md-6">
                        <input class="form-control theme" name="name" id="name" type="text">
                    </div>
                </div>
                <div class="row form-group">
                    <label class="control-label col-lg-2">描述</label>
                    <div class="col-lg-8 col-md-6">
                        <textarea class="form-control theme" rows="2" name="description" id="description"></textarea>
                    </div>
                </div>
            </div>

            <div class="col-md-4 column">
                <img alt="140x140" src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3101321712,1617406504&fm=58&bpow=1024&bpoh=860" />
                <div class="form-group">
                   <label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
                  <p class="help-block">
                    Example block-level help text here.
                  </p>
                </div>
            </div>
          </div>

        </div>
    </form>



    <button type="button" class="btn btn-primary js-upload-photos">
        <span class="glyphicon glyphicon-cloud-upload"></span> 上传图片
    </button>
    <input id="fileupload" type="file" name="file" multiple
           style="display: none;"
           data-url="{% url 'progress_bar_upload' %}"
           data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}, "12": "1111""}'>
</div>


<table id="gallery" class="table table-bordered">
    <thead><tr><th>已上传</th></tr></thead>
    <tbody>
        {% for photo in photos %}
            <tr>
                <td><a href="{{ photo.file.url }}">{{ photo.file.name }}</a></td>
            </tr>
        {% endfor %}
    </tbody>
</table>

<div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Uploading...</h4>
            </div>
            <div class="modal-body">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
